import React from 'react'
import ReactDOM from 'react-dom'   
import  List from '../../component/List/List'//list
import  Trees from '../../component/Trees/Trees'//Trees
import './css/NewCommunication.css' 
class NewCommunication extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            legend : false , 
        };
    }
    
     config = {
        width:  350,         
        theme:'default',   
        data:[ 
            {
                 name:'主题:',
                 nameStyle:{}, 
                 type:'input',
                 rightStyle:{width:'100%',borderColor:'#C8DDF5',minHeight:70},
                 content:'',
                 inputChange:(e,data)=>{ 
                    data.content = e.target.value; 
                    this.setState({})
                }         
            },
             {
                 name:'附件列表:',
                 nameStyle:{}, 
                 type:'file',  
                 data:[ ],//图片信息
                 uploadTool:[{
                     name:'附件',
                     img:'./assets/NewCommunication/arr.png',
                     imgStyle:{width:45,height:45},
                     accept:' ',
                     itemChange:(e,data)=>{
                        let item=e.target.files[0]; 
                        let formData = new FormData();
                        let fileinf = item.name;
                        let arr = fileinf.split(".");
                        let type = arr[arr.length - 1];
                        formData.append("Filedata", item);
                        formData.append("Filename", fileinf);
                        formData.append("fileext", "*." + type);
                        formData.append("DataType", "UploadFile");
                        formData.append("UploadFolder", "/CommonReport/");
                        formData.append("IsConvertOffice", "");
                        formData.append("GetFileName", "y");
                        formData.append("TCID", "");
                        formData.append("UploadTargetKey", "n");
                        formData.append("GetFileInfo", "y");
                        T.ajax({//上传文件
                            f : 'text',
                            key : 'oaFileUpPath',
                            data:formData,
                            method:'POST',
                            contentType: false,
                            success : (result) => { 
                                let arr = result.split("|");
                                let s = {
                                        file: item.name,
                                        id: arr[0]
                                }; 
                                 data.push(s); 
                                this.setState({})  
                            }
                        });  
                     },
                 } ],
                 deleteStyle:{color:'#107ADE',position:'absolute',right:'10'},
                 deleteFn:(id,data)=>{
                   let pa = {
                        annexId: id
                    }
                    T.ajax({
                        f : 'json',
                        key : 'oaFileDelPath',
                        data:pa,
                        success : (result) => {
                            let list=[];
                            data.map((item,i)=>{
                                if(item.id!=id){
                                    list.push(item);
                                }
                            });
                             this.config.data[1].data=list;
                            this.setState({})
                            // this.setState({state:!this.state.state});
                        }
                    }); 
                 },
            },
                {
                 name:'参与人员:',
                 nameStyle:{}, 
                 type:'addlist',
                data:[
                    // {
                    //     name:'某人1',
                    //     icon:'./assets/NewCommunication/man.png'
                    // },
                    // {
                    //     name:'某人2',
                    //     icon:'./assets/NewCommunication/man.png'
                    // }
                 ], 
                  uploadTool:[{
                     name:'添加',
                     img:'./assets/NewCommunication/add.png',
                     imgStyle:{width:45,height:45},
                     itemClick:(e)=>{
                         this.info.popupshow =this.info.popupshow=='none'?'block':'none'; 
                        this.setState({})
                     }
                 } ],
                 deleteStyle:{color:'#107ADE',position:'absolute',right:'10'},
                 deleteFn:(id,data)=>{
                       let list=[];
                        data.map((item,i)=>{
                            if(item.id!=id){
                                list.push(item);
                            }
                        });
                        this.config.data[2].data =list;
                        this.setState({})
                 },
            },
        ]
    }
 
     componentWillMount = () => {  } 
     componentDidMount = () => { 
    } 
    info={
        boxW:360,
        popupshow:'none',
         btn:{
              height: 60,
              lineHeight:'60px',
              background: '#3997EE',
              textAline:'center'
        }
    }
   
    treesConfig = {
        width:  350,
        height:(document.documentElement.clientHeight || document.body.clientHeight)*0.9-20-this.info.btn.height,
        theme:'default',  
        key:'get_oa_role_list' ,//节点树的数据
        checkbox:true,//复选框
        childThreeOpen:false,//默认关闭三级子节点
        icon:'./assets/Trees/json-down.png',//图标
        imgStyle:{ width: 13,  height: 13,   opacity: .35 , position: 'relative',  left: '-10px' },
        checkData:[], 
    } 
    treesData=[   ]   
    treeSaveFn = ()=>{ 
        this.config.data[2].data=[];
        let obj=document.getElementsByTagName('input');
        for (let i=0;i<obj.length;i++){ 
            if(obj[i].checked){
                this.config.data[2].data.push({
                    name:obj[i].value,
                    id: obj[i].getAttribute('data-origin_id'),
                    icon:'./assets/NewCommunication/man.png' 
                })
            } 
        }
        T.data('checkPreson',this.config.data[2].data) ;
         this.info.popupshow =this.info.popupshow=='none'?'block':'none';
         this.setState({})
        
    }

    saveFn =()=>{
        let data = this.config.data[1].data;
        let attachment=[];
        data.map((item,i)=>{
            attachment.push(item.id)
        })
        let par={
            title: this.config.data[0].content,
            attachment: attachment.toString(),
            // create_time:T.clock(new Date()).fmt('YYYY-MM-DD hh:mm:ss') 
            create_tm:T.clock(new Date()).fmt('YYYY-MM-DD hh:mm:ss') 
        } 
        this.postData('s_message_common_hy',par)
        
    }

    postData=(key,par)=>{
        let that=this;
           T.ajax({
	        key: key,
	        data: par,
            method:'POST',
	        success: function success(result) { 
                 result = typeof(result) =='string'? JSON.parse(result):result; 
                 let uid=[];
                 that.config.data[2].data.map((item,i)=>{
                    uid.push(item.id)
                 })
                T.data('msg_id',result.data.msg_id); 
                 let par={
                      'msg_id':result.data.msg_id,
                      'user_id':uid.toString()
                 } 
                 T.ajax({
                    key: 'u-msg-user-rel',
                    data: par, 
                    success: function success(result) {  
                        // 数据清空
                        that.config.data[0].content=[];
                        that.config.data[1].data=[];
                        that.config.data[2].data=[];
                        T.router.go('/ChatInterface');//跳转到聊天页面
                        // T.router.go('/LnstantMesList');//跳转到列表页
                        // 清空
                    }
                }); 
            }
	    }); 
    }
    backFn=()=>{
        T.router.go('/LnstantMesList');//跳转到通信列表页面 
    }
    render() {
 
        return (
            <div  className="NewCommunication">
                <div className="ret" onClick={this.backFn} ><label className="lab" >《 返回聊天界面</label></div>
                 <div> 
                    {  
                        this.config.data.map((item,i)=>{ 
                            switch(item.type){
                                    case 'input':
                                            return(
                                                <div  className={item.type+'Wrap'}>
                                                    <p  style={item.nameStyle}>{item.name}</p>
                                                    <div className='rightC'>
                                                        <textarea rows="" cols=' ' type="" name="" value={item.content} style={item.rightStyle} onChange={()=>item.inputChange(event,item)}>
                                                        </textarea>
                                                    </div> 
                                                </div>
                                            )
                                    break;
                                    case 'file':
                                            let listShow=item.data.length>0?'block':'none';
                                            return(
                                                <div className={item.type+'Wrap'}>
                                                    <div className='title'>
                                                            <p  style={item.nameStyle}>{item.name}</p>   
                                                            <form enctype="multipart/form-data" method="post" className="tool" > 
                                                                {
                                                                    item.uploadTool.map((ktem,k)=>{
                                                                        return ( 
                                                                            <div className="upload-file"  style={ktem.imgStyle}><img src={ktem.img} alt={ktem.name} style={ktem.imgStyle} />
                                                                            <input type="file" style={ktem.imgStyle} onChange={()=>ktem.itemChange(event,item.data)}   accept={ktem.accept}  multiple="multiple"/>  </div>
                                                                        )
                                                                    })
                                                                }
                                                                </form> 
                                                    </div>
                                                    <div className='lists' style={{display:listShow}}>
                                                        {
                                                            item.data.map((jtem,j)=>{
                                                                return <div>
                                                                    <label  >{ jtem.file}</label>
                                                                    <span onClick={()=>item.deleteFn(jtem.id,item.data)} style={item.deleteStyle}>删除</span>
                                                                </div>
                                                            }) 
                                                        }
                                                    </div>

                                                </div>
                                            )
                                    break;
                                    case 'addlist':
                                            let listsShow=item.data.length>0?'block':'none';
                                            return(
                                                <div className={item.type+'Wrap'}>
                                                    <div className='title'>
                                                        <p   style={item.nameStyle}>{item.name}</p>  
                                                        <div className="tool">
                                                            {
                                                                item.uploadTool.map((ktem,k)=>{
                                                                    return (
                                                                        <img src={ktem.img} alt={ktem.name} style={ktem.imgStyle} onClick={()=>ktem.itemClick(event)} /> 
                                                                    )
                                                                })
                                                            }
                                                        </div>
                                                    </div>
                                                    <div className='lists'  style={{display:listsShow}}>
                                                        {
                                                        item.data.map((jtem,j)=>{
                                                            return <div>
                                                                <img src={jtem.icon} alt="" />
                                                                <label for="">{ jtem.name}</label>
                                                                <span onClick={()=>item.deleteFn(jtem.id,item.data)} style={item.deleteStyle}>删除</span>
                                                            </div>
                                                        }) 
                                                        }
                                                    </div>

                                                </div>
                                            )
                                    break;
                                
                            } 
                        })
                    }
                

                    <div className="btnSaveB" style={this.info.btn} onClick={this.saveFn}>
                        新增
                    </div>
                 </div>
                 <div className='popup' style={{display:this.info.popupshow}}>
                     <div className='content'>
                        <Trees  treesConfig={this.treesConfig}  treesData={this.treesData}   ></Trees> 
                        <div className="btnSaveB" style={this.info.btn} onClick={this.treeSaveFn}>
                            新增
                        </div>
                     </div>
                 </div>
            </div>
        )
    }
} 
export default NewCommunication 